<template>
	<view>
		<view class="head">
		  <view class="setting_icon"><van-icon name="setting-o" size="40rpx"  /></view>
		  <view class="userinfo">
		    <view class="head_sculpture">
		    </view>
		    <view class="name_phone">
				<image src="../../static/uni.png"></image>
		      <text>用户昵称</text>
		      <view>手机号:17788430977</view>
		    </view>
		  </view>
		</view>
		<view class="data">
		  <text>我的数据</text>
		  <text>查看更多></text>
		  <uni-grid :column="3">
		  	<uni-grid-item>
		  		<text class="text">文本</text>
		  	</uni-grid-item>
		  	<uni-grid-item>
		  		<text class="text">文本</text>
		  	</uni-grid-item>
			<uni-grid-item>
				<text class="text">文本</text>
			</uni-grid-item>
		  </uni-grid>
		</view>
		<view class="service">
			<text>我的服务</text>
			<uni-grid :column="4">
				<uni-grid-item>
					<text class="text">文本</text>
				</uni-grid-item>
				<uni-grid-item>
					<text class="text">文本</text>
				</uni-grid-item>
				<uni-grid-item>
					<text class="text">文本</text>
				</uni-grid-item>
				<uni-grid-item>
					<text class="text">文本</text>
				</uni-grid-item>
				<uni-grid-item>
					<text class="text">文本</text>
				</uni-grid-item>
				<uni-grid-item>
					<text class="text">文本</text>
				</uni-grid-item>
				<uni-grid-item>
					<text class="text">文本</text>
				</uni-grid-item>
				<uni-grid-item>
					<text class="text">文本</text>
				</uni-grid-item>
			</uni-grid>
		</view>
		
	</view>
</template>

<script>
	import { http } from "@/utils/http.js"
	export default {
		data() {
			return {
				
			}
		},
		methods: {
		},
		onLoad(){
			http({
				method:'GET',
				url:'https://www.free-api.com/doc/626',
				data:{
					'name':'andy',
					'age':18
				}
			})
		}
	}
</script>

<style>
page{
  background-color: white;
}
image{
	width: 100rpx;
	height: 100rpx;
}
.head{
  position: relative;
  background-color: rgb(26,215,133);
  height: 300rpx;
  
}
.setting_icon{
  position: absolute;
  top: 20rpx;
  right: 0;
}

.userinfo{
  position: relative;
  top: 70rpx;
  left: 60rpx;
  width: 600rpx;
  height: 200rpx;
  display: flex;
}

.name_phone{
  margin: 15rpx 0 0 20rpx;
  color: white;
  font-size: 40rpx;
}


.data{
  position: absolute;
  top: 280rpx;
  left: 70rpx;
  width: 600rpx;
  height: 200rpx;
  background-color: rgb(248,244,243);
}
.data text:nth-child(1){
	position: relative;
	left: 0;
}
.data text:nth-child(2){
	position: absolute;
	right: 0;
}

.service{
  position: absolute;
  top: 500rpx;
  left: 70rpx;
  width: 600rpx;
  height: 500rpx;
  background-color: rgb(248,244,243);
}


.item{
  margin-top: 20rpx;
}

.item .icon{
  position: relative;
  left: 10rpx;
}
.item .money{
  text-align: left;
  font-weight: bold;
}
.item .project{
  text-align: left;
  font-size: 23rpx;
}


</style>
